<template>
  <div class="app-container">
    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addAuth"
        v-if="permissions.indexOf('/admin/groupAdd') != -1"
      >{{$t('新增权限组')}}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="title" :label="$t('名称')"></el-table-column>
        <el-table-column prop="description" :label="$t('说明')"></el-table-column>
        <el-table-column :label="$t('操作')" width="300">
          <template slot-scope="scope" v-if="scope.row.is_system == 0">
            <button
              v-if="permissions.indexOf('/admin/groupRule') != -1"
              class="table_btn font12 bg_blue text_white"
              @click="bindAuth(scope.row)"
            >{{$t('绑定权限')}}</button>
            <button
              v-if="permissions.indexOf('/admin/groupEdit') != -1"
              class="table_btn font12 bg_blue text_white"
              @click="updateAuth(scope.row)"
            >{{$t('修改')}}</button>
            <button
              v-if="permissions.indexOf('/admin/groupDelete') != -1"
              class="table_btn font12 bg_danger text_white"
              @click="deletes(scope.row)"
            >{{$t('删除')}}</button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增权限组 -->
    <el-dialog
      width="900px"
      :visible.sync="showAddAuth"
      :title="isUpdate ? $t('修改权限组') : $t('新增权限组')"
      :close-on-click-modal="false"
    >
      <div class="tree_box">
        <div class="ipt_box u-f u-f-ac">
          <span class="label font14 text_black">{{$t('权限组名称')}}：</span>
          <el-input v-model="addFrom.name" :placeholder="$t('请输入权限组名称')"></el-input>
        </div>
        <div class="ipt_box u-f u-f-ac">
          <span class="label font14 text_black">{{$t('说明')}}：</span>
          <el-input v-model="addFrom.remarks" :placeholder="$t('请输入说明')"></el-input>
        </div>
        <el-button type="primary" @click="addSubmit" v-if="!isUpdate">{{$t('确定')}}</el-button>
        <el-button type="primary" @click="updateSubmit" v-if="isUpdate">{{$t('确定')}}</el-button>
      </div>
    </el-dialog>

    <!-- 绑定权限 -->
    <el-dialog
      width="900px"
      :visible.sync="showJuris"
      :title="$t('绑定权限')"
      :close-on-click-modal="false"
    >
      <div class="tree_box">
        <el-tree
          ref="tree"
          :data="jurisData"
          show-checkbox
          highlight-current
          :default-checked-keys="permiss"
          default-expand-all
          node-key="id"
          class="permission-tree"
        />
        <el-button type="primary" @click="jurisSubmit">{{$t('确定')}}</el-button>
      </div>
    </el-dialog>
    <refresh @click="getData"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "admin-groupList",
  data() {
    return {
      tableData: [],
      showAddAuth: false,
      isUpdate: false,
      addFrom: {
        id: "",
        name: "",
        remarks: ""
      },
      showJuris: false,
      permiss: [],
      jurisId: "",
      jurisData: []
    };
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      util.$http("/admin/groupList").then(res => {
        if (res.code == 1) {
          this.tableData = res.data;
        }
      });
    },
    getGroupDetail(id, type = "update") {
      util
        .$http("/admin/groupDetail", {
          id
        })
        .then(res => {
          if (res.code == 1) {
            if (type == "update") {
              this.addFrom = {
                id: res.data.id,
                name: res.data.title,
                remarks: res.data.description
              };
            } else {
              let arr = [];
              for (let item of res.data.permissions) {
                arr.push(Number(item));
              }
              this.permiss = arr;
              this.jurisData = res.data.tree;
            }
          }
        });
    },
    addAuth() {
      this.addFrom = {
        id: "",
        name: "",
        remarks: ""
      };
      this.isUpdate = false;
      this.showAddAuth = true;
    },
    updateAuth(row) {
      this.isUpdate = true;
      this.showAddAuth = true;
      setTimeout(() => {
        this.getGroupDetail(row.id);
      }, 150);
    },
    addSubmit() {
      util
        .$http("/admin/groupAdd", {
          title: this.addFrom.name,
          description: this.addFrom.remarks
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showAddAuth = false;
            this.addFrom = { id: "", name: "", remarks: "" };
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/admin/groupEdit", {
          id: this.addFrom.id,
          title: this.addFrom.name,
          description: this.addFrom.remarks
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showAddAuth = false;
            this.addFrom = { id: "", name: "", remarks: "" };
            this.getData();
          }
        });
    },
    jurisSubmit() {
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      util
        .$http("/admin/groupRule", {
          id: this.jurisId,
          rule: checkedKeys
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showJuris = false;
          }
        });
    },
    bindAuth(row) {
      this.jurisId = row.id;
      this.showJuris = true;
      setTimeout(() => {
        this.getGroupDetail(row.id, "bind");
      }, 150);
    },
    deletes(row) {
      this.$confirm(this.$t("是否要删除当前角色"))
        .then(() => {
          util
            .$http("/admin/groupDelete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.qrcode {
  cursor: pointer;
  margin: 0;
}
.circle {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 100%;
}
.cabinet_status {
  cursor: pointer;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
}
.table_btn {
  cursor: pointer;
  padding: 7px 10px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  margin-right: 15px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.tree_box {
  padding-left: 50px;
  text-align: right;
}
.tree_box .ipt_box {
  margin-bottom: 20px;
}
.tree_box .ipt_box .label {
  display: inline-block;
  width: 90px;
  text-align: left;
}
.tree_box .ipt_box .el-input {
  width: 200px;
}
.tree_box .el-button {
  margin-top: 40px;
  margin-right: 20px;
}
</style>
